<template>
  <el-container direction="vertical">
    <el-main>
      <h1 style="margin-top: 40px;margin-bottom: 30px;text-align: center" class="bi-egg-fried"> 食品区</h1>
      <p style="margin-bottom: 40px">🍚干饭人,干饭魂🍚</p>
      <div class="row justify-content-start feature">
        <div class="col-sm-6 col-md-5 col-lg-3" v-for="(items,index) in foods" :key="index">
          <Good :item="foods[index]"></Good>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Good from "../components/Good";
import axios from "axios";
export default {
  name: "Food",
  components: {Good},
  data(){
    return{
      foods: [],
    }
  },
  created() {
    axios.get('http://r44734h518.zicp.vip:41569/goods/getAllGoods').then(res=>{
      for (var i=0;i<res.data.length;i++){
        if (res.data[i].gkind === "食品") {
          this.foods.push(res.data[i]);
        }
      }
    }).catch(error=>{
      this.$message.error("网络连接错误")
    })
  }
}
</script>

<style scoped>

</style>
